<template>
	<view>
		<span v-show="mainflag">
			<div v-show="!showflag" class="flex-center flex-column" style="height: 800rpx;">
				<image src="/static/erro/nodata.png" style="width: 200rpx;height: 200rpx;"></image>
				<text class="font-color-999">暂无设备...下拉刷新</text>
			</div>
			<!-- <no-info v-show="!showflag"></no-info> -->
			<span v-show='showflag' style="width: 100%;height: 100%;background-color: #FFFFFF;">
				<view v-for="(content,key) in info" :key="key" @click="on(content.id)"
					class="border-bottom items-content-box flex-row align-items-center flex-space-between">
					<view class="item-img ">
						<image :src="content.file" class="my-img "></image>
					</view>
					<view class="item-content flex-column">
						<view class="serial-and-state  font-14px flex-space-between">
							<view class="serial lin-hid">客户公司：{{content.user_dep}}</view>
							<view class="detials" @click="seemore()">查看工单</view>
						</view>
						<view class="model-name">
							<text>设备型号：{{content.type}}</text>

						</view>
						<view class="fuselage-number">
							<text>
								设备机身号：{{content.number}}
							</text>
						</view>
					</view>
				</view>
				<image class="img-box" src="../../../../static/scanQR.png" @click="onScan(2)"></image>
				<uni-pagination style="z-index: 999; position: fixed; bottom: 20rpx;width: 100%;" :current="page"
					title="标题文字" :total="total" :pageSize="limit" @change="change"></uni-pagination>
			</span>
			<image v-show="!showflag" class="img-box" src="../../../../static/scanQR.png" @click="() =>onScan(2)">
			</image>
			<image class="img-box2" src="../../../../static/icon/qrCodeReplace.png" @click="() =>onScan(1)"></image>

			<!-- 输入弹框 -->
			<uni-popup ref="inputDialog" type="center">
				<view class="popup-content-body">
					<view class="modal-title">损坏替换</view>
					<view class="d-flex">
						<text>设备编号：</text>
						<input style="line-height: 1.8rem;" placeholder="请输入设备编号" v-model="equipmentNumber" />
					</view>
					<view class="button-group">
						<button size="mini" @tap="closeConfirm">取消</button>
						<button type="primary" size="mini" @tap="replaceInputConfirm">提交</button>
					</view>
				</view>
			</uni-popup>
		</span>


	</view>
</template>

<script>
	import uniCollapse from '@/components/uni-collapse/uni-collapse.vue'
	import uniCollapseItem from '@/components/uni-collapse-item/uni-collapse-item.vue'
	import {
		getEquipmentListByengineer,
		getEquipmentById,
		replaceQrCode
	} from '@/api/user/index.js'
	import uniPagination from '@/components/uni-pagination/uni-pagination.vue'
	export default {
		components: {
			uniCollapse,
			uniCollapseItem,
			uniPagination
		},
		data() {
			return {
				page: 1,
				limit: 10,
				total: 0,
				mainflag: false,
				showflag: false,
				defaultImg: '/static/erro/defaultImg.png',
				info: [{
					id: 1,
					imgUrl: ' ',
					number: ' ',
					type: '',
					installDate: ' ',
				}],
				cuurentScanQrCodeId: undefined,
				equipmentNumber: ""
			}
		},
		methods: {
			/**
			 * @param {Object} id设备id
			 */
			on(id) {
				uni.navigateTo({
					url: "/pages/views/engineer/WorkOrderRecord/WorkOrderRecord?id=" + id
				})
			},
			/**
			 * @param {Object} id设备id
			 */
			seemore() {
				uni.navigateTo({
					url: "/pages/views/engineer/WorkOrderRecord/WorkOrderRecord?id=" + id
				})
			},
			replaceInputConfirm() {
				if (!this.equipmentNumber) {
					uni.showToast({
						icon: 'none',
						title: "设备编号不能为空"
					})
					return;
				}

				replaceQrCode(this.cuurentScanQrCodeId, this.equipmentNumber).then(res => {
					console.log(res);
					if (res.code == 1) {
						this.$refs.inputDialog.close();
						uni.showToast({
							icon: 'none',
							title: "操作成功;"
						})
						this.cuurentScanQrCodeId = undefined;
						this.equipmentNumber = undefined;
					}
				})


			},
			closeConfirm() {
				this.$refs.inputDialog.close();
				this.cuurentScanQrCodeId = undefined;
				this.equipmentNumber = undefined;
			},
			/**
			 * @param {Object} type 扫码类型 1 二维码损坏替换 2工单查询
			 */
			onScan(type) {
				// 允许从相机和相册扫码
				let that = this
				uni.scanCode({
					success: function(res) {
						let id = res.result.split('=')[1]
						// getEquipmentByIdAndByEngineerId(id,that.$store.getters.id).then((res)=>{
						// 	console.log(res)
						// 	if(res.code == 1){
						// 		if(res.result[0].status == 1){
						// 			console.log("当前设备id为"+id)
						// 			uni.navigateTo({
						// 				url:"/pages/views/engineer/WorkOrderRecord/WorkOrderRecord?id="+id
						// 			})
						// 		}else{
						// 			uni.showToast({
						// 				icon: 'none',
						// 				title: res.msg
						// 			})

						// 		}
						// 	}

						// })

						if (id == undefined || id == null) {
							uni.showToast({
								icon: 'none',
								title: "无效二维码"
							})
							return;
						}
						that.cuurentScanQrCodeId = id;
						if (type === 1) {
							// 打开替换模态框
							that.$refs.inputDialog.open("center");
							return;
						}
						if (type === 2) {
							getEquipmentById(id).then((res) => {
								console.log(res)
								if (res.code == 1) {
									if (res.result[0].status == 1) {
										uni.hideLoading()
										uni.navigateTo({
											url: "/pages/views/engineer/WorkOrderRecord/WorkOrderRecord?id=" +
												id
										})
									} else {
										uni.hideLoading()
										console.log("扫除当前设备id为" + id)
										uni.showToast({
											icon: 'none',
											title: "设备未录入"
										})
									}
								}

							})
							that.cuurentScanQrCodeId = undefined;
							return;
						}
					}
				});
			},
			/**
			 * 获取设备列表
			 */
			getEquipmentlist() {
				let id = this.$store.getters.id
				getEquipmentListByengineer(id, this.limit, this.page).then((data) => {
					if (data.result.data.length > 0) {
						this.total = data.result.limitCount
						this.info = data.result.data
						this.info.forEach((item) => {
							if (item.file == null || item.file == '') {
								item.file = this.defaultImg
							}

						})
						console.log(this.info)
						uni.hideLoading();
						this.mainflag = true
						this.showflag = true
					} else {
						uni.hideLoading();
						this.mainflag = true
						this.showflag = false
					}

				})
			},
			/**
			 * 分页上一页下一页事件
			 * 
			 */
			change(type, current) {
				this.page = type.current
				this.getEquipmentlist()
			}
		},
		onLoad() {
			uni.startPullDownRefresh();
			this.getEquipmentlist()
		},
		onPullDownRefresh() {
			this.getEquipmentlist()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onShow() {
			/**
			 * 检验当前是否已经登录
			 */
			let curRoute = this.$mp.page.route;
			this.$intercept.permission(curRoute)
		}
	}
</script>

<style scoped>
	.item {
		background-color: #FFFFFF;
	}

	.items-content-box {
		margin: 0 auto;
		background-color: #FFFFFF;
		width: 93%;
		height: 178rpx;
		color: #999999;
	}

	.item-img {
		height: 132rpx;
		width: 20%;
	}

	.item-content {
		height: 132rpx;
		width: 75%;
	}

	.serial-and-state {
		height: 37.33%;
		width: 100%;
	}

	.serial {
		width: 70%
	}

	.detials {
		width: 25%;
		color: #09BB07;
	}



	.serial-and-state text {
		width: 50%;
		height: 100%;
	}

	.model-name {
		font-size: 26rpx;
		height: 31.33%;
		line-height: 41.35rpx;
	}

	.fuselage-number {
		font-size: 20rpx;
		height: 31.33%;
		line-height: 41.35rpx;

	}

	.img-box {
		position: fixed;
		width: 100rpx;
		height: 100rpx;
		bottom: 220rpx;
		right: 30rpx;
	}

	.img-box2 {
		background: #09BB07;
		padding: 30rpx;
		position: fixed;
		border-radius: 100%;
		width: 100rpx;
		height: 100rpx;
		bottom: 340rpx;
		right: 30rpx;
	}

	.popup-content-body {
		background: #FFFFFF;
		border-radius: 10rpx;
		padding: 20rpx;
	}

	.button {
		display: flex;
		align-items: center;
		height: 35px;
		margin-left: 10px;
	}

	.button-group {
		margin-top: 15px;
		display: flex;
		justify-content: space-around;
	}

	.modal-title {
		font-size: 28rpx;
		color: #999999;
		font-weight: bolder;
		margin-bottom: 40rpx;
		text-align: center;
	}
</style>